<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <progress max="100" value="10">10%</progress>
    <progress max="100" value="20">20%</progress>
    <progress max="100" value="30">30%</progress>
    <progress max="100" value="50">50%</progress>
    <progress max="100" value="60">60%</progress>
    <progress max="100" value="90">90%</progress>
    <progress max="100" value="100">100%</progress>
</body>

<style>
    progress[value] {
        --w: 200px;
        --b:
            /* if < 30% "red" */
            linear-gradient(red, red) 0 /max(0px, var(--w)*.3 - 100%) 1px,
            /* else if < 60% "orange" */
            linear-gradient(orange, orange) 0 /max(0px, var(--w)*.6 - 100%) 1px,
            /* else "green" */
            green;
        appearance: none;
        border: none;
        width: var(--w);
        height: 20px;
        display: block;
        margin: 10px;
        background-color: lightgrey;
        border-radius: 50px;
    }

    progress[value]::-webkit-progress-bar {
        background-color: lightgrey;
        border-radius: 50px;
    }

    progress[value]::-webkit-progress-value {
        border-radius: 50px;
        background: var(--b);
    }

    progress[value]::-moz-progress-bar {
        border-radius: 50px;
        background: var(--b);
    }

    /*
 I am using "linear-gradient(X,X) instead of "linear-gradient(X 0 0)" 
 for better browser support "
*/
</style>

</html>